<template>
  <div class="am-u-sm-12 am-u-md-12 am-u-lg-12" >
    <div class="widget am-cf">
      <div class="widget-head am-cf">
        <div class="widget-title am-fl">老师信息</div>
        <div class="widget-function am-fr">
          <button type="button" class="am-btn am-btn-default" @click="$router.go(-1)">返回</button>
        </div>
      </div>
      <div class="widget-body am-fr">
        <form class="am-form tpl-form-border-form tpl-form-border-br" data-am-validator :id="id">
          <fieldset>
            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>姓名
              </label>
              <div class="am-u-sm-9 input-field">
                <input type="text"  class="am-form-field" data-validation-message="请输入姓名" placeholder="请输入姓名" required v-model="formData.teacherName">
              </div>
            </div>
            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>性别
              </label>
              <div class="am-u-sm-9 input-field">
                <label class="am-radio-inline">
                  <input type="radio"  value="1" name="sex" required v-model="formData.sex" >  男
                </label>
                <label class="am-radio-inline">
                  <input type="radio" value="2" name="sex" v-model="formData.sex"> 女
                </label>
              </div>
            </div>
            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>身份证/护照号
              </label>
              <div class="am-u-sm-9 input-field">
                <input type="text" :disabled="!hasWindowPermission('/main/sys/teacher/edit', 'changeIdNo')"  class="am-form-field" data-validation-message="请输入身份证号码或护照号" placeholder="请输入身份证或者护照号" required  v-model="formData.idNo">
              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>职能
              </label>
              <div class="am-u-sm-3 am-u-end input-field">
                <select2 required v-model="formData.accessType">
                  <option value="0">任课老师</option>
                  <option value="1">班主任</option>
                  <option value="2">外部班主任</option>
                </select2>
              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span v-show="formData.accessType!=='0'" class="am-text-danger am-margin-right-xs am-text-xs">*</span>Email
              </label>
              <div class="am-u-sm-6 input-field">
                <input :disabled="!canEditEmail" :required="formData.accessType!=='0'" type="text"  class="am-form-field" placeholder="请输入电子邮件地"  pattern="^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$" v-model="formData.email">
              </div>
              <div class="am-u-sm-3">
                <span class="am-text-sm">生成系统登陆用户名</span>
              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>电话号码
              </label>
              <div class="am-u-sm-9 input-field">
                <input type="text" class="am-form-field" placeholder="请输入手机号码"  data-validation-message="请输入正确的手机号码" pattern="^1\d{10}$" required v-model="formData.phoneNo"/>
              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">
                  {{needStar}}
                </span>任教年级
              </label>
              <div class="am-u-sm-9  input-field">
                <choose v-model="formData.gradeIds">
                  <select required data-placeholder="选择任教年级" style="min-width:300px;" multiple class="chosen-select-no-results">
                    <option value=""></option>
                    <option v-for="item in $root.config.grades" :value="item.gradeId">{{item.gradeName}}</option>
                  </select>
                </choose>
              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">
                  {{needStar}}
                </span>任教科目
              </label>
              <div class="am-u-sm-9 input-field">
                <choose v-model="formData.subjectIds">
                  <select required data-placeholder="选择任教科目" style="min-width:300px;" multiple class="chosen-select-no-results">
                    <option value=""></option>
                    <option v-for="item in $root.config.subjects" :value="item.subjectId">{{item.subjectName}}</option>
                  </select>
                </choose>
              </div>
            </div>



            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>所在区域
              </label>
              <div class="am-u-sm-3 am-u-end input-field">
                <select2 :disabled="!editable" required v-model="formData.areaTeamId" :options="areaTeams" >
                  <option value="">请选择</option>
                </select2>

              </div>
            </div>


            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                人事关系
              </label>
              <div class="am-u-sm-3 am-u-end input-field">
                <select2   v-model="formData.busTeamId" :options="busTeams" >
                  <option value="">请选择</option>
                </select2>
              </div>
            </div>


            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                入职日期
              </label>
              <div class="am-u-sm-3 am-u-end input-field">
                <date-picker v-model="formData.joinTime" >
                  <input type="text" placeholder="请选择入职日期" data-am-datepicker readonly  >
                </date-picker>
              </div>
            </div>
            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>任职性质
              </label>
              <div class="am-u-sm-3 am-u-end input-field">
                <select2 required v-model="formData.jobNature">
                  <option v-for="item in jobNatures" :value="item.value">{{item.label}}</option>
                </select2>
              </div>
            </div>
            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>在职状态
              </label>
              <div class="am-u-sm-3 am-u-end input-field">
                <select2 required v-model="formData.status">
                  <option value="1">在职</option>
                  <option value="0">离职</option>
                </select2>
              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>星级
              </label>
              <div class="am-u-sm-3 am-u-end input-field">
                <select2 required v-model="formData.level" >
                  <option value="">请选择</option>
                  <option value="1">1星</option>
                  <option value="2">2星</option>
                  <option value="3">3星</option>
                  <option value="4">4星</option>
                  <option value="5">5星</option>
                </select2>
              </div>
            </div>


            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                头像
              </label>
              <div class="am-u-sm-9 am-form-file input-field">
                <file-upload extensions="jpg,png" @uploaded="uploadAvatar">
                  <img class="am-margin-top am-radius" :src="formData.avatarUrl" style="width:168px;height:168px">
                </file-upload>
              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>老师标签
              </label>
              <div class="am-u-sm-9 input-field">

                <choose v-model="formData.myTags" :config="{max_selected_options: 3}">
                  <select required data-placeholder="选择老师标签" style="min-width:300px;" multiple class="chosen-select-no-results">
                    <option value=""></option>
                    <option v-for="item in tags" :value="item">{{item}}</option>
                  </select>
                </choose>

              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                老师签名
              </label>
              <div class="am-u-sm-9 input-field">
                <input type="text" class="am-form-field" placeholder="请输入签名"  maxlength="100"  v-model="formData.signature"/>
              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                介绍
              </label>
              <div class="am-u-sm-9 input-field">
                <editor v-model="formData.simpleIntro"></editor>
              </div>
            </div>


            <div class="am-form-group">
              <div class="am-u-sm-9 am-u-sm-push-3">

                <button type="submit" class="am-btn am-btn-primary">提交</button>
              </div>
            </div>
            </fieldset>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import io from '../../lib/io'
import {jobNatures} from '../../lib/global'
import util from '../../lib/util'
    export default{
        name:'teacher-form',
        data(){
            return{
              formData:{
                areaTeamId:'',
                busTeamId:'',
                gradeIds:[],
                subjectIds:[],
                status:1,
                jobNature:0,
                myTags:[],
                accessType:'0',
                avatarUrl:'//static.yuyou100.com/t_avatar.gif'
              },
              needStar: '*',
              tags:[],
              editable:true,
              canEditEmail : true
            }
        },
        created:function(){
          this.jobNatures = jobNatures
         var teacherId  = this.$params('teacherId')
         if(teacherId){
          var _this = this
          io.post(io.apiAdminTeacherDetail,{ teacherId : teacherId },
            function(ret){
              if(ret.success){
                ret.data.gradeIds = ret.data.teachGradeIds ? ret.data.teachGradeIds.split(',') : []
                ret.data.subjectIds = ret.data.teachSubjectIds ? ret.data.teachSubjectIds.split(','):[]
                ret.data.joinTime = util.formatDate ( ret.data.joinTime )
                ret.data.myTags = ret.data.tags ? ret.data.tags.split(',') : []
                _this.formData = ret.data
                _this.canEditEmail = !ret.data.email
              }
            },
            function(){
              _this.$alert('请求服务器失败')
          })
         }
         this.editable = !teacherId

          this.loadTeacherTags()
        },
      watch: {
          'formData.accessType'(newVal) {
            if (newVal === '1'|| newVal === '2') {
              this.needStar = ''
            }else {
              this.needStar = '*'
            }
          }
      },
        computed:{
          areaTeams : function(){
            var options =  ( this.$root.config.areaTeams || [] )
            .map(function(item){
              return {value:item.areaTeamId,text:item.name}
            })
            return options
          },
          busTeams : function(){
            var options =  ( ( this.formData.areaTeamId  ) ? ( this.$root.config.groupBusTeams[this.formData.areaTeamId] || [] )  : [] )
            .map(function(item){
              return {value:item.busTeamId,text:item.name}
            })
            return options
          }
        },
        mounted:function(){
          var _this = this ;
          $('#' + this.id ).validator({
            validate:function(validity){

            },
            onValid: function(validity) {
              $(validity.field).closest('.input-field').find('.am-alert').hide();
            },
            onInValid: function(validity) {
              var $field = $(validity.field);
              var $group = $field.closest('.input-field');
              var $alert = $group.find('.am-alert');
              // 使用自定义的提示信息 或 插件内置的提示信息
              var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
              if (!$alert.length) {
                $alert = $('<div class="am-alert am-alert-danger"></div>').hide().appendTo($group);
              }

              $alert.html(msg).show();
            },
            submit:function(e){
              e.preventDefault();

              if (_this.formData.accessType === '0') {
                if(!_this.formData.gradeIds || _this.formData.gradeIds.length == 0 ){
                  _this.$alert('请选择任教年级')
                  return
                }

                if(!_this.formData.subjectIds || _this.formData.subjectIds.length == 0){
                  _this.$alert('请选择任教科目')
                  return
                }
              }


              if(!_this.formData.myTags || _this.formData.myTags.length == 0 ){
                _this.$alert('请选择老师标签')
                return
              }


              var $submitBtn = $('button[type=submit]',e.target);
              $submitBtn.attr("disabled" ,"disabled" )
              _this.$showLoading()
              var formValidity = this.isFormValid();
              var complete = function(){
                _this.$hiddenLoading()
                $submitBtn.removeAttr("disabled" ,"disabled" )
              }
              if(formValidity){
                _this.save(complete);
              }else{
                complete.call()
              }
            }
          });
        },

        methods:{
          loadTeacherTags:function(){
            var _this = this
            io.post(io.apiAdminTeacherTags,{},
              function(ret){
                if(ret.success){
                  _this.tags  = ret.data
                }
              },
              function(){
                _this.$alert('请求服务器失败')
              })
          },
          save:function(complete){
            var _this = this
            var data = _this.formData
            data.teachGradeIds = data.gradeIds ? data.gradeIds.join(','): ''
            data.teachSubjectIds = data.subjectIds ? data.subjectIds.join(','): ''
            data.tags = data.myTags.join(',')
            data.fullChange=1
            io.post(io.apiAdminSaveOrUpdateTeacher,data,
            function(ret){
              complete.call()
              if(ret.success){
                _this.$toast('OK')
                _this.$router.push('/main/sys/teacher/list')
              }else{
                _this.$alert(ret.desc)
              }
            },
            function(){
              complete.call()
              _this.$alert('请求服务器失败')
            })
          },
          uploadAvatar:function(info){
            this.formData.avatarUrl = info.url
          }
        }
    }
</script>
